import React,{useEffect, useState} from 'react';
import styles from './index.less';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Select } from 'antd';
import axios from 'axios';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch } from 'antd';

type Props = {}

const index = (props: Props) => {
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };

  const [shopList,setshopList] = useState([])
  // 获取数据
  useEffect(()=>{
    const getshoplist=()=>{
       axios.get('http://localhost:7001/shop/getshopList').then(res=>{
        // console.log(res.data.data);
        setshopList(res.data.data)
       })
    }

    getshoplist();
  })

  interface DataType {
    id:number,
    image: string;
    h_name: string;
    h_address: number;
    leader: string;
    daytime: string;
    type:string,
    status:boolean
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '图片',
      dataIndex: 'image',
      key: 'image',
    },
    {
      title: '楼盘名称',
      dataIndex: 'h_name',
      key: 'h_name',
    },
    {
      title: '楼盘地址',
      dataIndex: 'h_address',
      key: 'h_address',
    },
    {
      title: '发起人',
      key: 'leader',
      dataIndex: 'leader',
      
    },
    {
      title: '起始时间',
      dataIndex: 'daytime',
      key: 'daytime',
    },
    {
      title: '团购状态',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, record) => (
        <Space size="middle">
          <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
        </Space>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={()=>del(record.id)}>删除</a>
        </Space>
      ),
    },
  ];
  
  const  del=async(id:number)=>{
     await axios.post('http://localhost:7001/shop/deletehopList',{id:id}).then(res=>{
        console.log(res);
     })
  }  


  return (
    <div className={styles.wrap}>
      <h3 className={styles.h2}>团购管理</h3>
      <p className={styles.mi}>
        <span>搜索:</span><input type="text" />
        <span>状态：</span>
        <Select
          defaultValue="请选择"
          style={{ width: 120 }}
          onChange={handleChange}
          options={[
            { value: '请选择', label: '请选择' },
            { value: '开启', label: '开启' },
            { value: '关闭', label: '关闭' },
            
          ]}
        />
        <Select
          defaultValue="请选择省份"
          style={{ width: 120 }}
          onChange={handleChange}
          options={[
            { value: '请选择省份', label: '请选择省份' }
          ]}
        />
        <Select
          defaultValue="请选择城市"
          style={{ width: 120 }}
          onChange={handleChange}
          options={[
            { value: '请选择城市', label: '请选择城市' }
          ]}
        />
        <Select
          defaultValue="请选择区县"
          style={{ width: 120 }}
          onChange={handleChange}
          options={[
            { value: '请选择区县', label: '请选择区县' }
          ]}
        />
        <input type="text" placeholder='关键字' />
        
        <button>查询</button>
      </p>

      <Table columns={columns} dataSource={shopList} style={{marginTop:'30px'}}/>
    </div>
  )
}

export default index